<template>
  <div class="">
    <el-card class="box-card">
      <el-row :gutter="0">
        <el-col :xs="24" :sm="18" :md="12">
          <el-form ref="ref" :model="model" :rules="rules" label-width="120px">
            <el-form-item label="支付方式" prop="">
              <el-radio-group v-model="model.pay_method">
                <el-radio v-for="(item, index) in payments" :key="index" :label="index">{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="商户号" prop="mch_id">
              <el-input v-model="model.mch_id" clearable/>
            </el-form-item>
            <el-form-item label="应用ID" prop="app_id">
              <el-input v-model="model.app_id" clearable/>
            </el-form-item>
            <el-form-item label="秘钥" prop="app_secret">
              <el-input v-model="model.app_secret" clearable/>
            </el-form-item>
            <el-form-item>
              <el-button :loading="loading" type="primary" icon="el-icon-s-promotion" @click="submit()">保存</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {paymentConfig} from '@/api/admin/setting'

export default {
  name: 'AdminSettingPayment',
  components: {},
  data() {
    return {
      loading: false,
      model: {
        pay_method: 'wxpay',
        mch_id: '',
        app_id: '',
        app_secret: ''
      },
      rules: {
        mch_id: [{required: true, message: '请输入商户号', trigger: 'blur'}],
        app_id: [{required: true, message: '请输入应用ID', trigger: 'blur'}],
        app_secret: [{required: true, message: '请输入秘钥', trigger: 'blur'}]
      },
      payments: {}
    }
  },
  created() {
    this.info()
  },
  methods: {
    info() {
      paymentConfig().then((res) => {
        this.payments = res.data.payments
        if (res.data.config) {
          this.model = res.data.config
        }
      })
    },
    // 提交
    submit() {
      this.$refs['ref'].validate(valid => {
        if (valid) {
          this.loading = true
          paymentConfig(this.model, 'post').then(res => {
            this.loading = false
            this.$message.success(res.msg)
          }).catch(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>
